<template>
  <div class="container">
    <div class="div_box">
      <div class="head">基本信息</div>
      <div class="div_neiron">
        <div><span>探测器编码：</span>{{ deviceInfo.deviceCode || "-" }}</div>
        <div>
          <span>探测器型号：</span>{{ deviceInfo.detectorTypeName || "-" }}
        </div>
        <div><span>安装点：</span>{{ deviceInfo.spaceName }}</div>
        <div>
          <span>状态：</span>
          <span v-if="deviceInfo.status == 0">停用</span>
          <span v-else-if="deviceInfo.status == 1">启用</span>
          <span v-else>-</span>
        </div>
        <!-- <div>
          <span>在线：</span>
          <span v-if="deviceInfo.online == 1">在线</span>
          <span v-else>离线</span>
        </div> -->
        <div>
          <span>告警状态：</span>
          <span v-if="deviceInfo.isAlarm == 0">正常</span>
          <span v-else-if="deviceInfo.isAlarm == 1">告警</span>
          <span v-else>-</span>
        </div>
        <div>
          <span>故障状态：</span>
          <span v-if="deviceInfo.isMalfunction == 0">正常</span>
          <span v-else>故障</span>
        </div>
        <div
          v-if="user.roleName == 'ORG_ADMIN' || user.roleName == 'TENANT_ADMIN'"
        >
          <div><span>安装点：</span>{{ deviceInfo.spaceName || "-" }}</div>
        </div>

        <div><span>回路号：</span>{{ deviceInfo.circuitNumber || "-" }}</div>
        <div><span>节点号：</span>{{ deviceInfo.nodeNumber || "-" }}</div>
        <div><span>主机号：</span>{{ deviceInfo.hostNumber || "-" }}</div>

        <div><span>离线时间：</span>{{ deviceInfo.offlineTime || "-" }}</div>
        <div><span>上线时间：</span>{{ deviceInfo.onlineTime || "-" }}</div>
        <div >
          <span>备注：</span>{{ deviceInfo.remark || "-" }}
        </div>
      </div>
    </div>
    <div class="div_box" v-if="deviceInfo.detectorType != '107'">
      <div class="head">设备操作</div>
      <div class="div_neiron" v-if="commandList && commandList.length">
        <el-button
          class="button-new-tag"
          type="primary"
          @click="onCommand(item)"
          v-for="item in commandList"
          :key="item.id"
          >{{ item.keyName }}</el-button
        >
      </div>
      <div v-else class="div_neiron">暂无操作</div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  reqKeyCommandList,
  reqKeyCommandSend,
  reqDetectorUpdate,
} from "@/api/api";
export default {
  props: ["deviceInfo"],
  data() {
    return {
      commandList: [],
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() {},
  methods: {
    // 获取指令列表
    async getKeyCommandList() {
      console.log("deviceInfo", this.deviceInfo);
      let res = await reqKeyCommandList({
        deviceCode: this.deviceInfo.deviceCode,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.commandList = res.data.list;
      console.log("res", res);
    },

    // 下发指令
    async onCommand(item) {
      const result = await this.$confirm(
        `此操作将下发 ${item.keyName} 指令, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {});
      if (result !== "confirm") return;
      let res = await reqKeyCommandSend({
        deviceCode: this.deviceInfo.deviceCode,
        id: item.id,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("指令下发成功");
    },
  },
};
</script>


<style lang="less" scoped>
.container {
  color: @primaryThemeTxtColor4;
  font-size: 14px;
  //   min-height: 500px;
  // background: pink;
  height: 100%;
  overflow-y: auto;

  .div_box {
    background: @primaryBorderColor3;
    // background: #353A54;
    border-radius: 15px;
    padding: 20px 25px 50px 35px;
    box-sizing: border-box;
    margin: 15px 30px 15px;
    position: relative;
    &:last-child {
      margin-bottom: 40px;
    }

    .head {
      font-size: 16px;
      color: #7367f0;
      font-weight: 600;
      margin-bottom: 20px;
    }

    .div_neiron {
      display: flex;
      flex-wrap: wrap;
      padding: 0 30px;
      box-sizing: border-box;
      line-height: 26px;

      > div {
        width: 33.33%;
        margin: 5px 0;

        > span:first-of-type {
          color: @primaryFFFColor6;
        }
      }
    }

    .div_tab {
      display: flex;

      > div {
        background: @primaryBorderColor4;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 15px;
        margin-right: 15px;
        width: 120px;
        height: 120px;
        cursor: pointer;
        box-sizing: border-box;

        > span:first-of-type {
          margin-bottom: 8px;
        }
      }
    }
  }
}

.el-tag + .el-tag {
  margin-left: 10px;
  margin-bottom: 10px;
}
.button-new-tag {
  margin-left: 10px;
  margin-bottom: 10px;
  height: 28px;
  line-height: 28px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 50px;
  margin-left: 10px;
  margin-bottom: 10px;
  vertical-align: bottom;
}

::v-deep .el-button--small {
  background: #7367f0;
  color: #fff;
  border: none;
}
::v-deep .el-button--primary {
  &:hover {
    color: #ddd;
  }
}
</style>